<template>
	<view class="content">
		<!-- <u-navbar bgColor="#ffffff" placeholder title="完善信息" :autoBack="true"></u-navbar> -->
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view style="margin-bottom: 62rpx;font-size: 27rpx;color: #666666;">选择头像</view>
		<u-line color="#d8d8d8"></u-line>
		<view class="iput-flex">
			<view style="color: #666666;">昵称</view>
			<input type="nickname" name="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName" />
		</view>
		<u-line color="#d8d8d8"></u-line>
		<view class="but-con">
			<view class="card-but" @click="addCard">确定</view>
			<!-- <button class="card-but" form-type="submit" @click="addCard">提交</button> -->
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {

		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickName: '',
				uploadImg: ''
			}
		},

		onLoad(option) {
			console.log(option);
			this.nickName = option.nickName || ''
			this.avatarUrl = option.avatar ||
				'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
			this.uploadImg = option.avatar || ''
		},
		methods: {
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl);
				this.uploadFilePromise(e.detail.avatarUrl)
			},
			async addCard() {
				console.log(this.nickName);
				if (!this.nickName) {
					uni.$u.toast('请输入昵称')
				}
				if (!this.uploadImg) {
					uni.$u.toast('请选择头像')
				}
				const data = {
					id: uni.getStorageSync('id'),
					userName: this.nickName,
					avatar: this.uploadImg
				}

				const res = await this.$apis.user.setInfo(data)
				uni.showToast({
					title: '提交成功',
					duration: 1000,
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			uploadFilePromise(url) {
				uni.showLoading({
					title: '上传中...'
				});
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.api + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							'token': uni.getStorageSync('token') || '',
							'X-Requested-With': 'XMLHttpRequest',
						},
						formData: {
							"file": url,
						},
						success: (res) => {

							let obj = JSON.parse(res.data);

							this.avatarUrl = obj.url
							this.uploadImg = obj.url
							uni.hideLoading()
						}
					});
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;
	}

	button {
		border: none;
		padding: 0;
		margin: 0;
		background-color: #ffffff;
		line-height: normal;


		&::after {
			border: none;
		}
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	input {
		width: 400rpx;
		margin: 0 auto;

	}

	.iput-flex {
		width: 750rpx;
		display: flex;
		align-items: center;
		padding: 31rpx;
		box-sizing: border-box;

	}

	.but-con {
		width: 750rpx;
		height: 277rpx;
		background-color: #FFFFFF;
		margin-top: 200rpx;
	}

	.card-but {
		width: 673rpx;
		height: 77rpx;
		margin: 0 auto;
		background: #2FCC71;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 27rpx;
	}
</style>